<!--
 * @Author: daidai
 * @Date: 2022-03-01 15:27:58
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-05-07 11:24:14
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\right-center.vue
-->
<template>
  <div v-if="pageflag" class="right_center_wrap beautify-scroll-def" :class="{ 'overflow-y-auto': !sbtxSwiperFlag }">
    <component :is="components" :data="list" :class-option="defaultOption">
      <ul class="right_center ">
        <li class="right_center_item" v-for="(item, i) in list" :key="i">
          <span class="orderNum">{{ i + 1 }}</span>
          <div class="inner_right">
            <div class="dibu"></div>
            <div class="flex">
              <div class="info">
                <span class="labels ">舆情ID：</span>
                <span class="contents zhuyao"> {{ item.gatewayno }}</span>
              </div>
              <div class="info">
                <span class="labels">话题：</span>
                <span class="contents "> {{ item.terminalno }}</span>
              </div>
              <div class="info">
                <span class="labels">级别：</span>
                <span class="contents warning"> {{ item.alertvalue }}</span>
              </div>
            </div>


            <div class="flex">

              <div class="info">
                <span class="labels"> 发布渠道：</span>
                <span class="contents ciyao" style="font-size:12px"> {{ item.provinceName }}</span>
              </div>
              <div class="info time">
                <span class="labels">发布时间：</span>
                <span class="contents" style="font-size:12px"> {{ item.createtime }}</span>
              </div>

            </div>
            <div class="flex">

              <div class="info">
                <span class="labels">处理部门：</span>
                <span class="contents ciyao" :class="{ warning: item.alertdetail }"> {{ item.alertdetail || '无'
                  }}</span>
              </div>
            </div>
            <div class="flex">

              <div class="info">
                <span class="labels">预警原因：</span>
                <span class="contents ciyao"> {{ item.sbInfo || '无'
                  }}</span>
              </div>
            </div>
            <div class="flex">

              <div class="info">
                <span class="labels">建议措施：</span>
                <span class="contents ciyao"> {{ item.phase || '无'
                  }}</span>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </component>
  </div>
  <Reacquire v-else @onclick="getData" style="line-height:200px" />

</template>

<script>
import { currentGET } from 'api/modules'
import vueSeamlessScroll from 'vue-seamless-scroll'  // vue2引入方式
import Kong from '../../components/kong.vue'
export default {
  components: { vueSeamlessScroll, Kong },

  data() {
    return {
      // 舆情ID,话题,级别,发布渠道,发布时间,处理部门,预警原因,建议措施
      /* YQ2023001,违章建筑,高,微博,2024-11-01 08:30,市容管理科,建筑违章引发居民投诉，发布平台为高传播力渠道。加快违章建筑拆除，避免矛盾激化。
YQ2023002,占道经营,中,微信,2024-11-01 09:00,市容管理科,占道夜市摊贩扰民，微信发布频次较高。加强夜间巡查，确保摊贩不影响居民生活。
YQ2023003,环境污染,高,新闻网站,2024-11-01 10:15,环境保护科,工业区空气质量不达标，居民健康受到影响。立即督促企业整改，降低污染源排放。
YQ2023004,垃圾堆放与清运,中,论坛,2024-11-01 11:30,市容管理科,垃圾堆放长期未清理，论坛讨论活跃。清理堆放垃圾，恢复社区卫生。
YQ2023005,噪声污染,高,微博,2024-11-01 12:00,环境保护科,噪声超标扰民，发布于微博等传播广的渠道。夜间噪声监控，避免扰民。
YQ2023006,无证广告牌,中,新闻APP,2024-11-01 13:45,广告管理科,无证广告存在安全隐患，新闻APP曝光频繁。拆除无证广告，保障行人安全。
YQ2023007,市容破坏,低,微信,2024-11-01 14:20,市容管理科,市容破坏现象，市民投诉增多。修复公共设施，改善市容。
YQ2023008,交通违法,高,微博,2024-11-01 15:30,交通管理科,交通违停造成堵塞，微博反馈较多。限制违停区域，保障道路畅通。
YQ2023009,违法占地,中,论坛,2024-11-01 16:00,市容管理科,农地被非法占用，引发关注。严格查处占地行为，保护土地资源。
YQ2023010,防疫管理,高,新闻APP,2024-11-01 17:15,防疫管理科,聚集活动可能影响防疫安全，新闻APP提示高风险。疏导聚集人群，确保防疫安全 */
      list: [
        {
          alertdetail: "市容管理科",
          alertvalue: '高',
          cityName: "微博",
          createtime: "2024-11-01 08:30",
          gatewayno: 'YQ2023001', // 舆情ID
          phase: "加快违章建筑拆除，避免矛盾激化", // 建议措施
          provinceName: "微博",// 发布渠道
          sbInfo: "建筑违章引发居民投诉，发布平台为高传播力渠道", // 预警原因
          terminalno: '违章建筑',// 话题
        },
        {
          alertdetail: "市容管理科",
          alertvalue: '中',
          cityName: "微信",
          createtime: "2024-11-01 09:00",
          gatewayno: 'YQ2023002', // 舆情ID
          phase: "加强夜间巡查，确保摊贩不影响居民生活", // 建议措施
          provinceName: "微信",// 发布渠道
          sbInfo: "占道夜市摊贩扰民，微信发布频次较高", // 预警原因
          terminalno: '占道经营',// 话题
        },
        {
          alertdetail: "环境保护科",
          alertvalue: '高',
          cityName: "新闻网站",
          createtime: "2024-11-01 10:15",
          gatewayno: 'YQ2023003', // 舆情ID
          phase: "立即督促企业整改，降低污染源排放", // 建议措施
          provinceName: "新闻网站",// 发布渠道
          sbInfo: "工业区空气质量不达标，居民健康受到影响", // 预警原因
          terminalno: '环境污染',// 话题
        },
        {
          alertdetail: "市容管理科",
          alertvalue: '中',
          cityName: "论坛",
          createtime: "2024-11-01 11:30",
          gatewayno: 'YQ2023004', // 舆情ID
          phase: "清理堆放垃圾，恢复社区卫生", // 建议措施
          provinceName: "论坛",// 发布渠道
          sbInfo: "垃圾堆放长期未清理，论坛讨论活跃", // 预警原因
          terminalno: '垃圾堆放与清运',// 话题
        },
        {
          alertdetail: "环境保护科",
          alertvalue: '高',
          cityName: "微博",
          createtime: "2024-11-01 12:00",
          gatewayno: 'YQ2023005', // 舆情ID
          phase: "夜间噪声监控，避免扰民", // 建议措施
          provinceName: "微博",// 发布渠道
          sbInfo: "噪声超标扰民，发布于微博等传播广的渠道", // 预警原因
          terminalno: '噪声污染',// 话题
        },
        {
          alertdetail: "广告管理科",
          alertvalue: '中',
          cityName: "新闻APP",
          createtime: "2024-11-01 13:45",
          gatewayno: 'YQ2023006', // 舆情ID
          phase: "拆除无证广告，保障行人安全", // 建议措施
          provinceName: "新闻APP",// 发布渠道
          sbInfo: "无证广告存在安全隐患，新闻APP曝光频繁", // 预警原因
          terminalno: '无证广告牌',// 话题
        },
        {
          alertdetail: "市容管理科",
          alertvalue: '低',
          cityName: "微信",
          createtime: "2024-11-01 14:20",
          gatewayno: 'YQ2023007', // 舆情ID
          phase: "修复公共设施，改善市容", // 建议措施
          provinceName: "微信",// 发布渠道
          sbInfo: "市容破坏现象，市民投诉增多", // 预警原因
          terminalno: '市容破坏',// 话题
        },
        {
          alertdetail: "交通管理科",
          alertvalue: '高',
          cityName: "微博",
          createtime: "2024-11-01 15:30",
          gatewayno: 'YQ2023008', // 舆情ID
          phase: "限制违停区域，保障道路畅通", // 建议措施
          provinceName: "微博",// 发布渠道
          sbInfo: "交通违停造成堵塞，微博反馈较多", // 预警原因
          terminalno: '交通违法',// 话题
        },
        {
          alertdetail: "市容管理科",
          alertvalue: '中',
          cityName: "论坛",
          createtime: "2024-11-01 16:00",
          gatewayno: 'YQ2023009', // 舆情ID
          phase: "严格查处占地行为，保护土地资源", // 建议措施
          provinceName: "论坛",// 发布渠道
          sbInfo: "农地被非法占用，引发关注", // 预警原因
          terminalno: '违法占地',// 话题
        },
        {
          alertdetail: "防疫管理科",
          alertvalue: '高',
          cityName: "新闻APP",
          createtime: "2024-11-01 17:15",
          gatewayno: 'YQ2023010', // 舆情ID
          phase: "疏导聚集人群，确保防疫安全", // 建议措施
          provinceName: "新闻APP",// 发布渠道
          sbInfo: "聚集活动可能影响防疫安全，新闻APP提示高风险", // 预警原因
          terminalno: '防疫管理',// 话题
        }
      ],
      pageflag: true,
      defaultOption: {
        ...this.$store.state.setting.defaultOption,
        limitMoveNum: 3,
        singleHeight: 250,
        step: 0,
      }

    };
  },
  computed: {
    sbtxSwiperFlag() {
      let ssyjSwiper = this.$store.state.setting.ssyjSwiper
      if (ssyjSwiper) {
        this.components = vueSeamlessScroll
      } else {
        this.components = Kong
      }
      return ssyjSwiper
    }
  },
  created() {
    this.getData()
  },

  mounted() { },
  methods: {
    getData() {
      this.pageflag = true
      // this.pageflag =false
      currentGET('big5', { limitNum: 50 }).then(res => {
        console.log('实时预警', res);
        if (res.success) {
          let timer = setTimeout(() => {
            clearTimeout(timer)
            this.defaultOption.step = this.$store.state.setting.defaultOption.step
          }, this.$store.state.setting.defaultOption.waitTime);
        } else {
          this.pageflag = false
          this.$Message.warning(res.msg)
        }
      })
    },

  },
};
</script>
<style lang='scss' scoped>
.right_center {
  width: 100%;
  height: 100%;

  .right_center_item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    padding: 10px;
    font-size: 14px;
    color: #fff;

    .orderNum {
      margin: 0 20px 0 -20px;
    }


    .inner_right {
      position: relative;
      height: 100%;
      width: 400px;
      flex-shrink: 0;
      line-height: 1.5;

      .dibu {
        position: absolute;
        height: 2px;
        width: 104%;
        background-image: url("../../assets/img/zuo_xuxian.png");
        bottom: -12px;
        left: -2%;
        background-size: cover;
      }
    }

    .info {
      margin-right: 10px;
      display: flex;
      align-items: center;

      .labels {
        flex-shrink: 0;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.6);
      }

      .zhuyao {
        color: $primary-color;
        font-size: 15px;
      }

      .ciyao {
        color: rgba(255, 255, 255, 0.8);
      }

      .warning {
        color: #E6A23C;
        font-size: 15px;
      }
    }

  }
}

.right_center_wrap {
  overflow: hidden;
  width: 100%;
  height: 250px;
}

.overflow-y-auto {
  overflow-y: auto;
}
</style>